<template>
  <div id="app">
    <div class="header-box">
      <div>
        <label class="header-label">月份</label>
        <el-date-picker
          v-model="queryMonth"
          type="month"
          placeholder="选择月份"
          value-format="yyyy-MM-dd"
          style="width: 180px"
          @blur="monthChange"
        ></el-date-picker>
      </div>
      <el-form ref="form" :model="queryParams" :inline="true">
        <el-form-item label="值班领导">
          <el-input
            v-model="queryParams.dutyLeader"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="值班人">
          <el-input
            v-model="queryParams.dutyPeople"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="值班日期">
          <el-date-picker
            v-model="queryParams.getTimeInfo"
            type="date"
            placeholder="值班日期"
            value-format="yyyy-MM-dd"
            style="width: 180px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="queryLoading"
            >查询</el-button
          >
          <el-button type="primary" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-calendar v-model="queryParams.getMonth">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <div
          @click="showDialog(data.day)"
          :class="{
            'day-content-class': true,
            'day-content-active-class': viewDate[data.day]
              ? viewDate[data.day].highlight
              : false,
            'day-content-current-class':
              data.day === dayjs().format('YYYY-MM-DD'),
          }"
        >
          <template>
            <div class="header-class">
              <div class="day-class">
                {{ data.day.split("-").slice(1)[1] }}
              </div>
            </div>
            <div class="paiban-class">
              <div style="width: 100%; height: 100%">
                <CalendarCenter
                  :dataInfo="
                    viewDate[data.day]
                      ? viewDate[data.day]
                      : {
                          dayNightShift: '',
                          dutyShiftLeader: '',
                          nightShift: '',
                        }
                  "
                  :currentDate="data.day"
                  @showDialog="showDialog"
                >
                </CalendarCenter>
              </div>
            </div>
          </template>
        </div>
      </template>
    </el-calendar>
    <el-dialog
      title="值班排班记录"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="dialogClose"
    >
      <div class="content-box" v-if="this.isBefore && scheduleInfo.length > 0">
        <el-descriptions
          :column="3"
          border
          v-for="(item, key) in scheduleInfo"
          :key="key"
        >
          <el-descriptions-item label="值班人">{{
            item.onDuty
          }}</el-descriptions-item>
          <el-descriptions-item label="值班日期">{{
            formatDate(item.onDutyDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="值班类型"
            ><el-tag size="small">{{
              item.onDutyType
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="接班人">{{
            item.successor
          }}</el-descriptions-item>
          <el-descriptions-item label="值班日期">{{
            formatDate(item.successorDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="值班类型"
            ><el-tag size="small">{{
              item.successorType
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item :span="3" label="值班记录">{{
            item.dutyRecord
          }}</el-descriptions-item>
          <el-descriptions-item :span="3" label="移交事项">{{
            item.transferMatters
          }}</el-descriptions-item>
          <el-descriptions-item :span="3" label="带班领导">{{
            item.dutyLeader
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="content-box" v-else-if="!this.isBefore">
        <el-descriptions :column="5" border direction="vertical">
          <el-descriptions-item :span="2" label="值班日期">{{
            formatDate(scheduleInfoAfter.dutyDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="星期">{{
            scheduleInfoAfter.week
          }}</el-descriptions-item>
          <el-descriptions-item label="带班局领导">
            {{ scheduleInfoAfter.dutyShiftLeader }}
          </el-descriptions-item>
          <el-descriptions-item label="领导联系方式">{{
            scheduleInfoAfter.dutyShiftLeaderPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="值班类型"
            ><el-tag size="small">{{
              scheduleInfoAfter.dayShiftDutyType || "白班"
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="白班处级值班人员">{{
            scheduleInfoAfter.dayNightShiftLeader
          }}</el-descriptions-item>
          <el-descriptions-item label="白班处级值班员联系方式">{{
            scheduleInfoAfter.dayNightShiftLeaderPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="白班值班员">{{
            scheduleInfoAfter.dayNightShiftPeople
          }}</el-descriptions-item>
          <el-descriptions-item label="白班值班员联系方式">{{
            scheduleInfoAfter.dayNightShiftPeoplePhone
          }}</el-descriptions-item>
          <el-descriptions-item label="值班类型"
            ><el-tag size="small">{{
              scheduleInfoAfter.nightShiftDutyType
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="夜班处级值班员">{{
            scheduleInfoAfter.nightShiftLeader
          }}</el-descriptions-item>
          <el-descriptions-item label="夜班处级值班员联系方式">{{
            scheduleInfoAfter.nightShiftLeaderPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="夜班值班员">{{
            scheduleInfoAfter.nightShiftPeople
          }}</el-descriptions-item>
          <el-descriptions-item label="夜班值班员联系方式">{{
            scheduleInfoAfter.nightShiftPeoplePhone
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="content-box-default" v-else>
        <span>暂无排班记录</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CalendarCenter from "@/components/CalendarCenter.vue";
import {
  getScheduleData,
  getScheduleInfo,
  exportScheduleData,
  getScheduleInfoAfter,
} from "@/api/schedule.js";
import dayjs from "dayjs";
export default {
  name: "App",
  components: {
    CalendarCenter,
  },
  data() {
    return {
      queryMonth: dayjs().format("YYYY-MM-DD"),
      queryParams: {
        getMonth: dayjs().format("YYYY-MM-DD"),
        dutyLeader: "",
        dutyPeople: "",
        getTimeInfo: "",
      },
      queryLoading: false,
      viewDate: {},
      dialogVisible: false,
      isBefore: false,
      scheduleInfo: [],
      scheduleInfoAfter: {},
    };
  },
  created() {
    this.handleQuery();
  },
  mounted() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.queryMonth = dayjs(this.queryParams.getMonth).format("YYYY-MM-DD");
        this.handleQuery();
      });
      //点击今天
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      dayBtn.addEventListener("click", () => {
        this.queryMonth = dayjs(this.queryParams.getMonth).format("YYYY-MM-DD");
        this.handleQuery();
      });
      //点击下个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.queryMonth = dayjs(this.queryParams.getMonth).format("YYYY-MM-DD");
        this.handleQuery();
      });
    });
  },
  methods: {
    handleQuery() {
      getScheduleData({
        ...this.queryParams,
        getMonth: dayjs(this.queryParams.getMonth).format("YYYY-MM-DD"),
      }).then(({ data }) => {
        this.viewDate = data;
        if (this.queryParams.getTimeInfo) {
          for (let i in data) {
            if (data[i].highlight) {
              this.queryParams.getMonth = i;
            }
          }
        }
      });
    },
    handleDetails(queryTime) {
      if (
        dayjs(queryTime).format("YYYY-MM-DD") < dayjs().format("YYYY-MM-DD")
      ) {
        this.isBefore = true;
        getScheduleInfo({ queryTime }).then(({ data }) => {
          this.scheduleInfo = data;
        });
      } else {
        this.isBefore = false;
        getScheduleInfoAfter({ queryTime }).then(({ data }) => {
          this.scheduleInfoAfter = data;
        });
      }
    },
    monthChange(e) {
      this.queryParams.getMonth = e.value;
      this.queryParams.dutyLeader = "";
      this.queryParams.dutyPeople = "";
      this.queryParams.getTimeInfo = "";
      this.handleQuery();
    },
    showDialog(queryTime) {
      this.dialogVisible = true;
      this.handleDetails(queryTime);
      if (
        dayjs(queryTime).format("MM") !==
        dayjs(this.queryParams.getMonth).format("MM")
      ) {
        setTimeout(() => {
          this.queryParams.dutyLeader = "";
          this.queryParams.dutyPeople = "";
          this.queryParams.getTimeInfo = "";
          this.handleQuery();
        }, 500);
        this.queryMonth = queryTime;
      }
    },
    dialogClose() {
      this.dialogVisible = false;
      this.scheduleInfo = [];
      this.scheduleInfoAfter = {};
    },
    handleExport() {
      exportScheduleData({
        queryTime: dayjs(this.queryParams.getMonth).format('YYYY-MM-DD'),
      }).then((res) => {
        this.$download.excel(res, "值班明细.xls");
      });
    },
    formatDate(time) {
      if (time) {
        return dayjs(time).format("YYYY-MM-DD");
      } else {
        return "";
      }
    },
  },
};
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 30px;
} */
.header-box {
  padding: 0 10px;
  display: flex;
  gap: 0 10px;
}
.header-label {
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}
.content-box {
  width: 100%;
  max-height: 400px;
  overflow-y: scroll;
}
.content-box-default {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409eff;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #c1c1c1;
}
.el-calendar-table thead th:before {
  content: "星期";
}

.el-calendar-table thead th {
  font-size: 16px;
  font-weight: 800;
}

.el-table__fixed-right {
  height: 100% !important;
}

.calender-class {
  width: 100%;
  height: 100%;
  padding: 0 50px;
}

.el-button-group .el-button:hover {
  color: #3de6ff;
  border-color: #caf7ed;
  background-color: transparent;
}
.el-calendar-day {
  padding: 0px !important;
  height: 120px !important;
  /* margin: 10px !important; */
  overflow: auto;
}
.el-calendar-table .el-calendar-day:hover {
  background-color: #c5deb69e !important;
}
.is-selected > .el-calendar-day {
  /* background-color: #c5deb69e !important; */
  background-color: #fff !important;
}
.is-today > .el-calendar-day {
  background-color: #f2f8fe !important;
}
.day-class {
  text-align: left;
  line-height: 30px;
  font-size: 18px;
}
.el-calendar-table {
  height: 100%;
}

.el-calendar__title {
  font-size: 18px;
  font-weight: 500;
}
.day-content-class {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px !important;
}
.day-content-active-class {
  background-color: #ffe598c5;
}
.day-content-current-class {
  background-color: #f2f8fe;
}
.header-class {
  flex: 1;
  display: flex;
  height: 28px;
  flex-direction: row;
  justify-content: space-between;
}
.el-icon-edit-outline {
  font-weight: 400;
}
.day-class {
  flex: 4;
}

.paiban-class {
  flex: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.icon-class {
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
